<template>
  <div id="payrollCredit">
    <div class="pageHead">
      <el-form ref="listQuery" :model="listQuery" class="listQuery">
        <el-form-item>
          <el-date-picker
            clearable
            v-model="listQuery.date"
            value-format="yyyy-MM"
            type="month"
            placeholder="选择年月份"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="listQuery.subid"
            class="maxSelect"
            filterable
            clearable
            placeholder="所属公司"
          >
            <el-option
              v-for="item in companyList"
              :key="item.subid"
              :value="item.subid"
              :label="item.subName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            round
            size="medium"
            :loading="tableLoading"
            @click="handleSearch"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="pageMain">
      <div class="tableContent">
        <el-table
          :data="tableData"
          style="width: 100%"
          height="100%"
          v-loading="tableLoading"
          size="medium"
          class="pageInnerTable"
        >
          <el-table-column align="left" prop="name" label="工资名称" />
          <el-table-column align="right" prop="peopleNumber" label="工资人数" />
          <el-table-column align="right" prop="yfWages" label="应发工资" />
          <el-table-column align="right" prop="taxPayable" label="应纳税额" />
          <el-table-column align="right" prop="sfWages" label="实发工资" />
          <el-table-column align="center" label="操作" width="200">
            <template slot-scope="scope">
              <div class="btnList">
                <el-button type="text" @click="handleDetails(scope.row)"
                  >详情</el-button
                >
                <el-button type="text" @click="handleExport(scope.row.id, 1)"
                  >导出代发表格</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- <el-pagination :small="true" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.PageIndex" :page-sizes=[10,20,50] :page-size="listQuery.PageSize" layout="total, sizes, prev, pager, next, jumper" :total=total class="pagingChild"></el-pagination> -->
    </div>
  </div>
</template>
<script>
import { getCompanyList } from "@/util/xc/utils";
import { mapState } from "vuex";
import { math } from "@/util/math.js";
export default {
  name: "payrollCredit",
  data() {
    return {
      listQuery: {
        date: `${new Date().getFullYear()}-${new Date().getMonth() + 1}`,
        subid: "",
      },
      isConfirmLoading: false,
      tableData: [1],
      total: 0,
      tableLoading: false,
    };
  },
  computed: {
    ...mapState({
      companyList: (state) => state.reward.companyList,
    }),
  },
  methods: {
    searchDataList() {
      this.tableLoading = true;
      console.log(this.listQuery);
      let params = {};
      if (this.listQuery.date && this.listQuery.date.length > 0) {
        params.year = parseInt(this.listQuery.date.substring(0, 4));
        params.month = parseInt(this.listQuery.date.substring(5, 9));
      }
      if (this.listQuery.subid && this.listQuery.subid.length > 0) {
        params.subid = this.listQuery.subid;
      }

      this.$api.smartSalary
        .getWagesList(params)
        .then((res) => {
          console.log(res);
          if (res.data.status == 200) {
            this.tableData = this.formatTableData(res.data.data);
          }
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },

    formatTableData(listData) {
      return listData.map((e) => {
        for (const key in e) {
          if (
            ["yfWages", "taxPayable", "taxPayable", "sfWages"].includes(key)
          ) {
            e[key] = math.toFixed(e[key]);
          }
        }
        return e;
      });
    },
    handleSearch() {
      this.searchDataList();
    },
    handleDetails(rowData) {
      this.$store.commit("SET_PAYROLL_ROUTE_DATA", rowData);
      this.$router.push({
        path: "/payrollDetails",
      });
    },

    /**
     * @description
     */
    handleExport(Wagesid, Stype) {
      // let params = `?Wagesid=${Wagesid}&Stype=${Stype}`;
      this.$api.payrollCredit
        .ExcelOutPayCredit({ Wagesid, Stype }, [])
        .then((res) => {
          console.log(res);
          if (res.data.status == 200) {
            console.log(res.data.data);
            const a = document.createElement("a");
            a.setAttribute("href", res.data.data);
            a.setAttribute("download", "");
            a.click();
          } else {
            this.$message.warning(res.data.message);
          }
        });
    },
  },
  activated() {
    this.searchDataList();
    getCompanyList();
  },
};
</script>
<style lang="less" scoped>
@import url("../less/common.less");
#payrollCredit {
  .tableContent {
    padding: 0;
  }
  .pagingChild {
    float: right;
    margin-right: 10px;
    margin-top: 5px;
    .el-pagination__total {
      line-height: 28px;
    }
  }
  .listQuery {
    .el-form-item {
      float: left;
      width: 150px;
      margin-right: 15px;
      .el-input {
        width: 100%;
      }
    }
  }
  .btnList {
    :deep(.el-button) {
      margin-left: 0 !important;
    }
  }
}
</style>